<template>
  <el-dialog
    v-model="visible"
    @close="onDialogClose"
    width="65vw"
    custom-class="graphs-dialog"
  >
    <echarts-graph
      :options="options"
      :key="graphID"
      v-for="(options, graphID) in graphsOptions"
      class="echarts-plot"
    ></echarts-graph>
  </el-dialog>

  <el-badge is-dot :hidden="!chartsUpdated">
    <el-tooltip :content="$tr('Charts')">
      <el-button @click="visible = true">
        <el-icon>
          <trend-charts></trend-charts>
        </el-icon>
      </el-button>
    </el-tooltip>
  </el-badge>
</template>

<script lang="ts">
import { addOnMessageHandler } from "@/api/ws";
import * as echarts from "echarts";
import { ref } from "vue";
import { defineComponent } from "vue-demi";
import EchartsGraph from "./EchartsGraph.vue";
import { TrendCharts } from "@element-plus/icons-vue";
export default defineComponent({
  name: "EchartsScope",
  components: { EchartsGraph, TrendCharts },
  setup() {
    return {
      visible: ref(false),
      chartsUpdated: ref(false),
      graphsOptions: ref({} as { [key: string]: echarts.EChartsOption }),
    };
  },
  methods: {
    onDialogClose() {
      this.visible = false;
      this.chartsUpdated = false;
    },
  },
  mounted() {
    addOnMessageHandler("plot", async (data: { [key: string]: echarts.EChartsOption }) => {
      await this.$nextTick();
      
      this.graphsOptions = data;
      this.chartsUpdated = true;
    });
  },
});
</script>

<style>
.graphs-dialog .el-dialog__body {
  width: 60vw;
  height: 60vh;
  overflow: auto;
}

.graphs-dialog .echarts-plot {
  margin-top: 20px;
}
</style>
